<template>
  <block>
    <view v-if="isEmpty" class="no-data">
      <tui-no-data :fixed="false" imgUrl="/static/images/no-data/no-data.png">{{ text }}</tui-no-data>
      <view class="is-flex flex-center mt-30">
        <tui-button
          v-if="refresh"
          type="gold"
          width="30vw"
          height="40px"
          shape="circle"
          size="28"
          :margin="back ? '0 20px 0px 0' : '0'"
          plain
          @click="$emit('refresh')"
          hover-class="hover-jump"
        >
          刷新
        </tui-button>
        <tui-button v-if="back" type="gold" width="30vw" height="40px" shape="circle" size="28" @click="navigateBack()" hover-class="hover-jump">返回上一页</tui-button>
      </view>
    </view>
    <slot v-else></slot>
  </block>
</template>

<script>
export default {
  props: {
    // 判断是否空数据的数据源
    data: {
      type: [Array, Object],
      default: null
    },
    // 是否显示刷新按钮
    refresh: {
      type: Boolean,
      default: null
    },
    // 是否显示回退按钮
    back: {
      type: Boolean,
      default: true
    },
    // 展示文字
    text: {
      type: String,
      default: '暂无更多数据'
    }
  },
  computed: {
    isEmpty() {
      return this.$isEmpty(this.data)
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.no-data {
  margin-top: 20vh;
}
</style>
